<template>
    <div class="farm-page">
      <TopBar></TopBar>
      <div class="background-container">
        <div class="carousel-container">
          <el-carousel :interval="5000" type="card" height="400px">
            <el-carousel-item v-for="item in newsList" :key="item.id">
              <img :src="item.image" :alt="item.title" class="carousel-image" />
              <h3 class="carousel-title">{{ item.title }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
  
      <div class="main-content">
        <main class="farm-main">
          <section class="news-section container">
            <h2 class="section-title">最新资讯</h2>
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="8" v-for="news in newsList" :key="news.id">
                <el-card class="news-item" shadow="hover" @click="goToNewsDetail(news)">
                  <img :src="news.image" class="news-image" :alt="news.title" />
                  <div class="news-content">
                    <h3>{{ news.title }}</h3>
                    <p>{{ news.content }}</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </section>
  
          <section class="hot-news-section">
            <div class="container">
              <h2 class="section-title">热门资讯</h2>
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12" v-for="news in hotNewsList" :key="news.id">
                  <el-card class="hot-news-item" shadow="hover" @click="goToNewsDetail(news)">
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <img :src="news.image" class="hot-news-image" :alt="news.title" />
                      </el-col>
                      <el-col :span="16">
                        <div class="hot-news-content">
                          <h3>{{ news.title }}</h3>
                          <p>{{ news.content }}</p>
                          <el-button type="text" class="read-more" @click.stop="goToNewsDetail(news)">阅读更多</el-button>
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </section>
        </main>
      </div>
    </div>
    <Footer></Footer>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import TopBar from "@/component/TopBar.vue";
  import Footer from "@/component/Footer.vue";
  
  const router = useRouter();
  
  const newsList = ref([
    {
      id: 1,
      title: '有机蔬菜种植',
      image: 'https://www.slalfood.com/static/upload/image/20230207/1675760537719613.png',
      content: '我们的有机蔬菜种植基地，保证新鲜健康的农产品供应。'
    },
    {
      id: 2,
      title: '农场开放日活动',
      image: 'https://www.huodongxing.com/file/ue/crawl/20180403/11CB90673A31D41C93E4BB3EC33468BAD9/835374646561621.png',
      content: '欢迎参加我们的农场开放日，体验农场生活的乐趣！'
    },
    {
      id: 3,
      title: '新鲜水果上市',
      image: 'https://img95.699pic.com/photo/60054/4005.jpg_wh860.jpg',
      content: '各种时令水果已经上市，欢迎选购品尝！'
    },
  ]);
  
  const hotNewsList = ref([
    {
      id: 4,
      title: '农场有机认证获得国际认可',
      image: 'https://pic.nximg.cn/20090912/2927_092358053714_2.jpg',
      content: '我们的农场有机认证获得国际权威机构认可，标志着我们在可持续农业方面迈出了重要一步。'
    },
    {
      id: 5,
      title: '新型智能灌溉系统投入使用',
      image: 'https://img79.afzhan.com/2/20210917/637674648497035686557.png',
      content: '我们引入了最新的智能灌溉系统，大大提高了水资源利用效率，为农作物提供最佳生长环境。'
    },
  ]);
  
  const activeIndex = ref('1');
  const isScrolled = ref(false);
  
  const handleSelect = (key, keyPath) => {
    console.log(key, keyPath);
  };
  
  const goToNewsDetail = (news) => {
    router.push({
      name: 'newsDetail',
      params: { id: news.id },
      state: { newsData: news }
    });
  };
  
  onMounted(() => {
    window.addEventListener('scroll', handleScroll);
  });
  
  const handleScroll = () => {
    if (window.scrollY > 50) {
      isScrolled.value = true;
    } else {
      isScrolled.value = false;
    }
  };
  </script>
  
  <style scoped>
  
  .select_btn {
    margin: auto;
    font-weight: bold;
    font-size: 18px;
  }
  
  .farm-page {
    font-family: 'Arial', sans-serif;
    color: #333;
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }
  
  .background-container {
    background-color: #e5e3e3;
    padding: 40px 0;
  }
  
  .carousel-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }
  
  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
  }
  
  .carousel-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 1.2rem;
  }
  
  .main-content {
    padding-top: 40px;
  }
  
  .section-title {
    text-align: center;
    margin-bottom: 30px;
    color: #4caf50;
  }
  
  .news-item {
    margin-bottom: 20px;
    transition: transform 0.3s ease;
    cursor: pointer;
  }
  
  .news-item:hover {
    transform: translateY(-5px);
  }
  
  .news-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .news-content {
    padding: 15px;
  }
  
  .news-content h3 {
    margin-top: 0;
    color: #4caf50;
  }
  
  .hot-news-section {
    background-color: #f0f8f0;
    padding: 40px 0;
    margin-top: 40px;
  }
  
  .hot-news-item {
    margin-bottom: 20px;
    cursor: pointer;
  }
  
  .hot-news-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
  }
  
  .hot-news-content {
    padding: 0 15px;
  }
  
  .hot-news-content h3 {
    margin-top: 0;
    color: #2e7d32;
    font-size: 1.2rem;
  }
  
  .hot-news-content p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 10px;
  }
  
  .read-more {
    color: #4caf50;
    font-weight: bold;
  }
  
  @media (max-width: 768px) {
    .hot-news-image {
      height: 100px;
    }
  
    .hot-news-content h3 {
      font-size: 1rem;
    }
  
    .hot-news-content p {
      font-size: 0.8rem;
    }
  }
  </style>
  
  